<template>
    <div class="page">
        <tz-table
                ref="tzTable"
                highlight-current-row
                size="mini"
                :data="loadData">
<!--            <el-table-column-->
<!--                    prop="orgName"-->
<!--                    show-overflow-tooltip-->
<!--                    label="单位名称">-->
<!--            </el-table-column>-->
            <el-table-column
                    prop="sourcePort"
                    show-overflow-tooltip
                    label="策略">
                <el-table-column
                        prop="no"
                        width="80px"
                        show-overflow-tooltip
                        label="行号">
                </el-table-column>
                <el-table-column
                        prop="name"
                        show-overflow-tooltip
                        label="名称">
                </el-table-column>
                <el-table-column
                        prop="ip"
                        show-overflow-tooltip
                        label="ip">
                </el-table-column>
                <el-table-column
                        prop="serverContent"
                        width="80px"
                        show-overflow-tooltip
                        label="协议类型/端口">
                </el-table-column>
                <el-table-column
                        prop="name"
                        show-overflow-tooltip
                        label="策略集">
                </el-table-column>
                <el-table-column
                        prop="rule"
                        show-overflow-tooltip
                        label="策略ID">
                </el-table-column>
<!--                <el-table-column-->
<!--                        prop="direction"-->
<!--                        width="80px"-->
<!--                        show-overflow-tooltip-->
<!--                        label="应用方向">-->
<!--                </el-table-column>-->
                <el-table-column
                        prop="isPass"
                        width="80px"
                        show-overflow-tooltip
                        :formatter = "(row) => {
                              return ['禁用', '启用'][row.enable] || '-'
                          }"
                        label="结果">
                </el-table-column>
            </el-table-column>
<!--            <el-table-column-->
<!--                    prop="sourceIp"-->
<!--                    show-overflow-tooltip-->
<!--                    label="原始IP">-->
<!--            </el-table-column>-->
<!--            <el-table-column-->
<!--                    prop="sourcePort"-->
<!--                    width="120px"-->
<!--                    show-overflow-tooltip-->
<!--                    label="源端口">-->
<!--            </el-table-column>-->
            <el-table-column
                    prop="srcAddressContent"
                    show-overflow-tooltip
                    label="源IP">
                <template slot-scope="scope">
                    <high-light :value="scope.row.srcAddressContent" :keyword="filterData.srcAddressContent"></high-light>
                </template>
            </el-table-column>
            <el-table-column
                    prop="srcAddressObjects"
                    width="120px"
                    show-overflow-tooltip
                    label="源IP名称">
            </el-table-column>
            <el-table-column
                    prop="destAddressContent"
                    show-overflow-tooltip
                    label="目的IP">
                <template slot-scope="scope">
                    <high-light :value="scope.row.destAddressContent" :keyword="filterData.destAddressContent"></high-light>
                </template>
            </el-table-column>
            <el-table-column
                    prop="destAddressObjects"
                    width="120px"
                    show-overflow-tooltip
                    label="目的IP名称">
            </el-table-column>
<!--            <el-table-column-->
<!--                    prop="targetPort"-->
<!--                    width="120px"-->
<!--                    show-overflow-tooltip-->
<!--                    label="目标端口">-->
<!--            </el-table-column>-->
        </tz-table>
    </div>
</template>

<script>
import tzTable from '@/components/tz-table'
export default {
  name: 'couplingDetail',
  components: {
    tzTable
  },
  props: {
    filterData: {
      type: Object,
      required: true
    },
    isEq: {
      type: Number,
      required: true
    },
  },
  methods: {
    refresh() {
      this.$refs.tzTable.refresh(true)
    },
    loadData(params) {
      const { fireId, srcAddressContent, destAddressContent, network } = this.filterData
      return this.$http.get('/fire/policy/getFirePolicy', {
        params: {
          fireId,
          srcAddressContent,
          destAddressContent,
          network,
          isEq: this.isEq,
          ...params
        }
      }).then(res => {
        return {
          data: (res.records || []).filter(item => item?.id).map(item => {
            let srcAddressContent = item.srcAddressContent
            let destAddressObjects = item.destAddressObjects
            try {
              srcAddressContent = JSON.parse(srcAddressContent)
            } catch(e) {
              srcAddressContent = [srcAddressContent]
            }
            try {
              destAddressObjects = JSON.parse(destAddressObjects)
            } catch(e) {
              destAddressObjects = [destAddressObjects]
            }
            return {
              ...item,
              srcAddressContent: srcAddressContent.join(','),
              destAddressObjects: destAddressObjects.join(',')
            }
          }),
          total: res.total
        }
      }).catch(err => {
        this.$TZmessage.error(err.error || '获取数据失败')
      })
    }
  }
}
</script>

<style scoped>

</style>